<template>
  <div id="call-volume-head">
    <div class="left">
      <div class="number">
      共<span>{{count}}</span>条
    </div>
    <div class="line"></div>
    <ul v-if="show !== 1">
      <li
        :class="{color:tabIndex === index}"
        v-for="(item,index) in classification"
        :key="index"
        @click="changeStyle(index,item.code,item.name)"
      >{{ classification[index].name }}</li>
    </ul>
    </div>
    <div class="right">
      <div class="line"></div>
    <div class="total">
      <div>合计：</div>
      <div class="w24 f12">通话时长</div>
      <span>{{callTotal.allDuration}}</span>
      <div class="w24 f12">通话个数</div>
      <span>{{callTotal.allCallNum}}</span>
      <div class="w48 f12">有效客源通话个数</div>
      <span>{{callTotal.allEffectiveCustomerNum}}</span>
      <div class="w48 f12">有效房源通话个数</div>
      <span>{{callTotal.allEffectiveHouseNum}}</span>
      <div class="w36 f12">无效通话个数</div>
      <span>{{callTotal.allInvalidCallNum}}</span>
      <div class="w48 f12">手动拨号有效通话</div>
      <span>{{callTotal.effectiveNum}}</span>
    </div>
    </div>
  </div>
</template>

<script>
/**
 * @author 陈涛
 * @information 表格头部区域
 * @date 2019-01-13
 */
export default {
  props: {
    callTotal: Object,
    show: Number,
    classification: Array,
    count: Number,
    tabIndex: Number
  },
  data () {
    return {
      // style: 0
    }
  },
  watch: {
    /**
     * @author 王磊
     * @information 搜索替换到人的tab
     * @date 2019-01-31 16:50
     */
    tabIndex (val) {
      this.style = val
    }
  },
  methods: {
    /**
     * @author 陈涛
     * @information Tab 切换
     * @date 2019-01-13
     * @param {*} changeStyle 点击切换 Tab 样式
     */ 
    changeStyle (index, code, name) {
      this.style = index
      let statusId = code?code:this.classification[0].code
      this.$emit('currentIndex', {index, statusId, name})
    }
  }
}
</script> 